<template>
  <el-dialog :close-on-click-modal='false' v-drag :title="record.id?$t('编辑') : $t('添加')" :v-if="dialogVisible" :visible.sync="dialogVisible" width="870px" @close='close' top="10vh">
    <div class="dialogContentBox">
      <el-form :model="record" ref="form" :rules="rules" :inline="true" :hide-required-asterisk="true" label-position="left" style="margin:0 20px;">
        <el-form-item style="width:430px;" label-width="110px" :label="$t('名称')" prop="name">
          <el-input v-emoji style="width:215px;" v-model="record.name" size='small' ref="name"></el-input>
        </el-form-item>
        <el-form-item style="width:325px;" label-width="110px" :label="$t('责任人')" prop="responsible">
          <el-select v-model="record.responsible" :placeholder="$t('请选择')" size='small' ref="responsible">
            <el-option v-for="item in responsibleList" :key="item.id" :label="item.name" :value="item.name"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item style="width:430px;" label-width="110px" :label="$t('描述')" prop="desc">
          <el-input v-emoji style="width:215px;" v-model="record.desc" size='small' ref="desc" type="textarea" @keydown.native="handleKeyCode($event)" :autosize="{ minRows: 2, maxRows: 4 }"></el-input>
        </el-form-item>
        <el-form-item style="width:325px;" label-width="110px" :label="$t('资产类型')" prop="type">
          <el-input v-emoji style="width:215px;" v-model="record.type" size='small' ref="type"></el-input>
        </el-form-item>
        <el-form-item style="width:430px;" label-width="110px" :label="$t('生产商')" prop="manufacturer">
          <el-input v-emoji style="width:215px;" v-model="record.manufacturer" size='small' ref="manufacturer"></el-input>
        </el-form-item>
        <el-form-item style="width:325px;" label-width="110px" :label="$t('资产位置')" prop="site">
          <el-input v-emoji style="width:215px;" v-model="record.site" size='small' ref="site"></el-input>
        </el-form-item>
        <el-form-item style="width:430px;" label-width="110px" :label="$t('固件版本号')" prop="firmware_num">
          <el-input v-emoji style="width:215px;" v-model="record.firmware_num" size='small' ref="firmware_num"></el-input>
        </el-form-item>
        <el-form-item style="width:325px;" label-width="110px" :label="$t('资产型号')" prop="model">
          <el-input v-emoji style="width:215px;" v-model="record.model" size='small' ref="model"></el-input>
        </el-form-item>
        <el-form-item style="width:430px;" label-width="110px" :label="$t('操作系统版本号')" prop="os_num">
          <el-input v-emoji style="width:215px;" v-model="record.os_num" size='small' ref="os_num"></el-input>
        </el-form-item>
        <el-form-item style="width:325px;" label-width="110px" :label="$t('软件版本号')" prop="software_num">
          <el-input v-emoji style="width:215px;" v-model="record.software_num" size='small' ref="software_num"></el-input>
        </el-form-item>
        <el-form-item style="width:430px;" label-width="110px" :label="$t('IP地址')" prop="ip_item">
          <el-input v-emoji style="width:215px;" v-model="record.ip_item" size='small' ref="ip_item"></el-input>
          <el-button type="success" size="small" @click="addAddr(record.ip_item)" class="editIpAddButton">{{$t('添加')}}</el-button>
        </el-form-item>

        <el-form-item style="width:325px;" label-width="110px" :label="$t('IP类型')">
          <el-radio-group v-model="record.ip_type" :disabled='record.id ? true : false'>
            <el-radio :label="1" class="groupIpv4">IPV4</el-radio>
            <el-radio :label="4" class="groupIpv6">IPV6</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-table size='mini' :data="record.ip" stripe border style="width: 100%;margin-top: 5px;">
          <el-table-column prop='ip' :label="$t('IP地址')" align="center">
            <template slot-scope="scope">
              <tooltip :html="scope.row" :content="scope.row" class="wid190" :refName="scope.row">
              </tooltip>
            </template>
          </el-table-column>
          <el-table-column fixed="right" :label="$t('操作')" width="100" align="center">
            <template slot-scope="scope">
              <el-button @click.native.prevent="deleteRow(scope.$index, record.ip)" :ref="'del' + (scope.$index + 1)" type="danger" plain size="mini">
                {{$t('删除')}}
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-form>
    </div>
    <span slot="footer" class="dialog-footer">
      <el-button type="primary" @click="submit" class="addSubmit">{{$t('确 定')}}</el-button>
      <el-button @click="close" class="addClose">{{$t('取 消')}}</el-button>
    </span>
  </el-dialog>

</template>

<script>
import { addAsset, editAsset, getAssetInfo } from '@/api/list/assets/assetobject'
import { getResponsibleArray } from '@/api/list/assets/responsible'
import { inputClass, texttextClass, selectClass } from '@/utils/input-class.js'
export default {
  name: 'AssetobjectDialog',
  data () {
    var validateName = (rule, value, callback) => {
      if (String(value).trim() === '') {
        callback(new Error(this.$t('不能为空')))
      } else {
        callback()
      }
    }
    var validateIp = (rule, value, callback) => {
      let ipv4 = /^(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])\.(\d{1,2}|1\d\d|2[0-4]\d|25[0-5])$/
      let ipv6 = /^\s*((([0-9A-Fa-f]{1,4}:){7}([0-9A-Fa-f]{1,4}|:))|(([0-9A-Fa-f]{1,4}:){6}(:[0-9A-Fa-f]{1,4}|((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){5}(((:[0-9A-Fa-f]{1,4}){1,2})|:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3})|:))|(([0-9A-Fa-f]{1,4}:){4}(((:[0-9A-Fa-f]{1,4}){1,3})|((:[0-9A-Fa-f]{1,4})?:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){3}(((:[0-9A-Fa-f]{1,4}){1,4})|((:[0-9A-Fa-f]{1,4}){0,2}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){2}(((:[0-9A-Fa-f]{1,4}){1,5})|((:[0-9A-Fa-f]{1,4}){0,3}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(([0-9A-Fa-f]{1,4}:){1}(((:[0-9A-Fa-f]{1,4}){1,6})|((:[0-9A-Fa-f]{1,4}){0,4}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:))|(:(((:[0-9A-Fa-f]{1,4}){1,7})|((:[0-9A-Fa-f]{1,4}){0,5}:((25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)(\.(25[0-5]|2[0-4]\d|1\d\d|[1-9]?\d)){3}))|:)))(%.+)?\s*$/
      if (value === '') {
        callback()
      } else if (value !== '' && this.record.ip_type === 1 && ipv4.test(value)) {
        callback()
      } else if (value !== '' && this.record.ip_type === 4 && ipv6.test(value)) {
        callback()
      } else {
        callback(new Error(this.$t('IP格式不正确')))
      }
    }

    return {
      dialogVisible: false,
      responsibleList: [],
      record: {
        id: null,
        name: '',
        ip_type: 1,
        ip: [],
        ip_item: '',
        desc: '',
        manufacturer: '',
        firmware_num: '',
        os_num: '',
        responsible: '',
        type: '',
        site: '',
        model: '',
        software_num: ''
      },
      recordCopy: {
        id: null,
        name: '',
        ip_type: 1,
        ip: [],
        ip_item: '',
        desc: '',
        manufacturer: '',
        firmware_num: '',
        os_num: '',
        responsible: '',
        type: '',
        site: '',
        model: '',
        software_num: ''
      },
      rules: {
        name: [{ required: false, validator: validateName, trigger: 'blur' }],
        ip_item: [{ required: false, validator: validateIp, trigger: 'blur' }]
      }
    }
  },
  watch: {
    'record.desc': {
      handler (newVal) {
        this.record.desc = newVal.replace(/[\r\n]/g, '')
      },
      immediate: true
    }
  },
  methods: {
    init (data) {
      this.dialogVisible = true
      getResponsibleArray().then(res => {
        this.responsibleList = res.info
      })
      if (data) {
        getAssetInfo({ name: data.name }).then(res => {
          this.record = Object.assign(this.record, res.info[0])
        })
      }
      this.$nextTick(() => {
        const data = ['name', 'type', 'manufacturer', 'site', 'firmware_num', 'model', 'os_num', 'software_num', 'ip_item']
        const selectData = ['responsible']
        const textdata = ['desc']
        inputClass(this.$refs, data)
        selectClass(this.$refs, selectData)
        texttextClass(this.$refs, textdata)
      })
    },
    submit () {
      this.$refs.form.validate((valid) => {
        if (valid) {
          if (this.record.ip.length < 1) {
            this.$message({
              message: this.$t('请输入IP地址'),
              type: 'error'
            })
          } else {
            if (!this.record.id) {
              addAsset(this.record).then(res => {
                if (res.status === 0) {
                  this.$message({
                    message: this.$t('添加成功'),
                    type: 'success'
                  })
                }
                this.close()
                this.$parent.listData()
              })
            } else {
              editAsset(this.record).then(res => {
                if (res.status === 0) {
                  this.$message({
                    message: this.$t('编辑成功'),
                    type: 'success'
                  })
                }
                this.close()
                this.$parent.listData()
              })
            }
          }
        }
      })
    },
    addAddr (data) {
      this.$refs['form'].validateField('ip_item', Error => {
        if (!Error && data) {
          this.record.ip.push(data)
          this.record.ip_item = ''
          this.$nextTick(() => {
            this.record.ip.forEach((elem, index) => {
              this.$refs['del' + (index + 1)].$el.classList.value += ' ' + 'del' + (index + 1)
            })
          })
        }
      })
    },
    close () {
      this.dialogVisible = false
      this.record = Object.assign({}, this.recordCopy)
      this.record.ip = []
      this.$refs.form.resetFields()
    },
    deleteRow (index, rows) {
      rows.splice(index, 1)
    },
    handleKeyCode (event) {
      if (event.keyCode === 13) {
        event.preventDefault() // 阻止浏览器默认换行操作
        return false
      }
    }
  }
}
</script>

<style scoped>
.dialogContentBox {
  max-height: calc(80vh - 184px);
  overflow-y: auto;
}
</style>
